<template>
  <div class="VueToNuxtLogo">
    <div 
      :class="fadeIns"
      class="creat-cirle">
      <h1
        v-show="showa"
        :class="fadeIna">享好物，赚佣金</h1>
      <h4
        v-show="showb"
        :class="fadeInb">优质好物朋友共享，更有佣金可赚</h4>
    </div>
    <img
      :class="fadeImg"
      src="~/static/img/white-mockin.png">
  </div>
</template>

<script>
export default {
  data() {
    return {
      fadeImg: 'animated slow fadeInUp',
      active: '',
      fadeIns: '',
      fadeIna: '',
      fadeInb: '',
      showa: false,
      showb: false
    }
  },
  mounted() {
    this.active = 'active'
    this.fadeIns = 'animated slow fadeInDown'
    this.time = setTimeout(() => {
      this.fadeImg = 'animated slow fadeInUp'
    }, 800)
    setTimeout(() => {
      this.showa = true
    }, 1800)
    setTimeout(() => {
      this.showb = true
    }, 2300)
    setTimeout(() => {
      this.fadeIna = 'animated fadeInDown'
    }, 1800)
    setTimeout(() => {
      this.fadeInb = 'animated fadeInDown'
    }, 2300)
  },
  destroyed() {
    clearTimeout(this.time)
    this.time = null
  }
}
</script>
<style lang="scss" scoped>
@media screen and (max-width: 1280px) {
  .creat-cirle {
    width: 47rem !important;
    height: 47rem !important;
  }
}
@media screen and (max-width: 1366px) {
  img {
    width: 43rem !important;
  }
}
@media screen and (width: 1024px) {
  .creat-cirle {
    width: 120rem !important;
    height: 120rem !important;
    padding-top: 32rem !important;
    h1 {
      font-size: 4.83rem !important;
    }
    h4 {
      font-size: 3.67rem !important;
      margin-top: 4rem;
    }
  }
  img {
    width: 96rem !important;
    left: 0rem !important;
  }
}
.VueToNuxtLogo {
  background-color: #ffffff;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: -webkit-radial-gradient(#f5f5f5 15%, transparent 16%),
    -webkit-radial-gradient(#f5f5f5 15%, transparent 16%),
    -webkit-radial-gradient(#f5f5f5 15%, transparent 20%),
    -webkit-radial-gradient(#f5f5f5 15%, transparent 20%);
  background-image: radial-gradient(#f5f5f5 15%, transparent 16%),
    radial-gradient(#f5f5f5 15%, transparent 16%),
    radial-gradient(#f5f5f5 15%, transparent 20%),
    radial-gradient(#f5f5f5 15%, transparent 20%);
  background-size: 16px 16px;
  .creat-cirle {
    width: 46rem;
    height: 46rem;
    background: linear-gradient(
      149deg,
      rgba(252, 245, 60, 0.86) 0%,
      rgba(248, 223, 28, 1) 100%
    );
    border-radius: 50%;
    left: 0;
    right: 0;
    margin: 10% auto 0;
    text-align: center;
    padding-top: 7rem;
    h1 {
      height: 4rem;
      font-size: 2.83rem;
      font-family: STYuanti-SC-Bold;
      font-weight: bold;
    }
    h4 {
      font-size: 1.67rem;
      font-family: PingFangSC-Regular;
      font-weight: 400;
    }
  }
  img {
    width: 35rem;
    position: absolute;
    bottom: -10rem;
    left: 0;
    right: 0;
    margin: auto;
  }
}
</style>
